<!-- 
 * 新增编辑消息组件
 * @author: 
 * @since: 2022-05-24
 * index.vue
-->
<template>
  <div class="add-edit-info-container p20 detailsPageBox">
    <div class="detailsMain">
      <el-form :model="form" :rules="rules" ref="validateForm">
        <el-form-item label="消息标题：" class="w440" prop="customMessageTitle">
          <el-input v-model="form.customMessageTitle" clearable placeholder="请输入消息标题" />
        </el-form-item>
        <el-form-item label="消息内容：" prop="customMessageContent">
          <el-input v-model="form.customMessageContent" type="textarea" :rows="8" placeholder="请输入消息内容" />
        </el-form-item>
        <el-form-item label="推送群体：" prop="customMessagePushRoleId" class="w440">
          <el-select v-model="form.customMessagePushRoleId" placeholder="请选择推送群体" @change="selectPushGroup">
            <el-option :label="item.label" :value="item.value" v-for="(item, index) in state.pushGroup" :key="index" />
          </el-select>
        </el-form-item>
        <el-form-item label="推送方式：" prop="pushType">
          <el-radio-group v-model="form.pushType">
            <el-radio :label="item.label" v-for="(item, index) in state.pushType" :key="index">{{ item.value }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="推送时间：" prop="customMessagePushTimeingDate" class="w440" v-if="form.pushType === 'TIMING'">
          <el-date-picker v-model="form.customMessagePushTimeingDate" type="datetime" placeholder="请选择推送时间" format="YYYY/MM/DD hh:mm:ss" value-format="YYYY-MM-DD h:m:s" />
        </el-form-item>
      </el-form>
    </div>
    <div class="detailsHandleBtn">
      <el-button type="primary" size="mini" @click="submit">提交</el-button>
      <el-button size="mini" @click="reset">重置</el-button>
    </div>
  </div>
</template>

<script setup>
import { reactive, onMounted, ref, defineProps, inject } from 'vue'
import { getPushGroupListApi, customInfoAddApi, customInfoEditApi } from '@/api/interface/info.js'
import { successHandle, backRoute, detailHandleFinish } from '@/utils/common.js'
import { sessionstorage } from '@/utils/storage.js'
import { useRouter, useRoute } from 'vue-router';
import { useStore } from 'vuex';
const router = useRouter();
const route = useRoute()
const store = useStore();

const props = defineProps({
  isAdd: {
    type: Boolean,
    default: true
  },
})
const state = reactive({
  pushGroup: [],//推送群体
  pushType: [
    {
      label: 'PROMPTLY',
      value: '立即推送'
    },
    {
      label: 'MANUAL',
      value: '手动推送'
    },
    {
      label: 'TIMING',
      value: '定时推送'
    },
  ],//推送方式
})

const form = reactive({
  customMessageTitle: '',//消息标题
  customMessageContent: '',//消息内容
  customMessagePushRoleId: 'all',//推送群体
  pushType: 'PROMPTLY',//推送方式
  customMessagePushTimeingDate: '',//推送时间
  customMessagePushRoleName: '推送全体',//自定义推送角色名称
  id: '',
  customMessagePushType: ''
})
//表单验证 
const rules = {
  customMessageTitle: [{ required: true, message: '必填项', trigger: 'blur' }],
  customMessageContent: [{ required: true, message: '必填项', trigger: 'blur' }],
  customMessagePushRoleId: [{ required: true, message: '必选项', trigger: 'change' }],
  pushType: [{ required: true, message: '必选项', trigger: 'change' }],
  customMessagePushTimeingDate: [{ required: true, message: '必选项', trigger: 'change' }],
};

//form表单
const validateForm = ref(null)
if (!props.isAdd) {//编辑
  if (sessionstorage.get('infoItem')) {
    const infoItem = sessionstorage.get('infoItem')
    for (let key in form) {
      if (infoItem[key]) {
        form[key] = infoItem[key]
      }
      if (key == "customMessagePushType") {
        switch (infoItem[key]) {
          case '立即推送':
            form.pushType = 'PROMPTLY'
            break;
          case '手动推送':
            form.pushType = 'MANUAL'
            break;
          case '定时推送':
            form.pushType = 'TIMING'
            break;
        }

      }
    }

  }
}


onMounted(() => {
  getPushGroupList()
})

//获取推送群体列表
const getPushGroupList = () => {
  getPushGroupListApi().then(res => {
    const { status, data } = res
    if (status == 200) {
      state.pushGroup = data.map((item) => ({
        label: item.rolename,
        value: item.id
      }))
    }
  })

}
//选择推送群体
const selectPushGroup = (val) => {
  state.pushGroup.forEach(item => {
    if (item.value === val) {
      form.customMessagePushRoleName = item.label
    }
  })
}

//提交
const submit = () => {
  validateForm.value.validate((valid) => {
    if (valid) {
      const params = {
        id: form.id,
        customMessageTitle: form.customMessageTitle,
        customMessageContent: form.customMessageContent,
        customMessagePushRoleId: form.customMessagePushRoleId,
        pushType: form.pushType,
        customMessagePushTimeingDate: form.customMessagePushTimeingDate,
        customMessagePushRoleName: form.customMessagePushRoleName
      }
      if (form.id) {//编辑
        customInfoEditApi(params).then(res => {
          detailHandleFinish(res, 'Info')
        })
      } else {//新增
        customInfoAddApi(params).then(res => {
          detailHandleFinish(res, 'Info')
        })
      }

    } else {
      console.log('没通过验证');
    }
  });

}
//重置
const reset = () => {
  validateForm.value.resetFields()
}


</script>

<style lang="scss" scoped>
.add-edit-info-container {
  .w440 {
    width: 440px;
    :deep(.el-input) {
      width: 100% !important;
    }
  }
}
</style>
